<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>计算商品</h1>
      <p>商品的单价是 <input type="text" v-model="price" /></p>
      <p>商品的数量是 <input type="number" v-model="count" /></p>
      <!-- 
        如果一个值是计算出来的，那么在插值语法中进行计算是不合理的
          1. 每次都要重新计算
          2. 阅读性和维护性差
       -->
      <p>商品的总价格是 {{ "￥" + (price * count).toFixed(2) }}</p>

      <!-- 
        如果一个值是计算出来的，如果封装成一个函数，在插值中调用
          1. 解决了维护差和阅读差的缺点
          2. 每次调用仍然重新计算
       -->
      <p>商品的总价格是 {{ getTotal() }}</p>
      <p>商品的总价格是 {{ getTotal() }}</p>
      <p>商品的总价格是 {{ getTotal() }}</p>
      <p>商品的总价格是 {{ getTotal() }}</p>
      <p>商品的总价格是 {{ getTotal() }}</p>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            price: 100,
            count: 1,
          };
        },
        methods: {
          getTotal() {
            console.log("计算");
            return "￥" + (this.price * this.count).toFixed(3);
          },
        },
      });
    </script>
  </body>
</html>
